<template>
	<li class="coupon"  @click="generateCoup(item)">
		<div class="coupon-bg"><img src="/img/cardBg.png" alt=""/></div>
		<div class="coupon-main">
			<div class="coupon-amount">
				<small>￥</small>{{item.couponAmount}}
			</div>
			<div class="content">
				<!--						<b>{{item.couponTypeName}}</b>-->
				<strong class="van-ellipsis">{{item.controlMsg}}</strong>
				<div class="coupon-limit">
					<span>{{item.limitMsg}}</span>
					<span v-if="item.activeType===1">{{item.activeDay}}天内有效</span>
					<span v-else>截止{{item.inactiveTime}}</span>
				</div>
			</div>
			<div class="coupon-button">
				<template v-if="item.maxAcquireAmount===0 || canGetCount(item.remainAmount,item.acquiredAmount,item.maxAcquireAmount)>0">
					<van-tag v-if="!loading" round size="large" type="primary">立即领取</van-tag>
					<van-tag v-else round size="large"><van-loading type="spinner" color="var(--white-color)"/> 领取中</van-tag>
				</template>
				<van-tag v-else round plain size="large">已领完</van-tag>
			</div>
		</div>
	</li>
</template>
<style lang="scss" scoped>
.coupon{
	display:block;margin:0 0 10px 0; padding:0; border-radius: 8px;position: relative;
	height:60px; overflow: hidden; font-size:14px;
	--van-tag-primary-color:var(--van-primary-color);
	&:last-child{margin-bottom:0;}
	&-bg{
		position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;background-color:var(--van-primary-color);opacity: .15;
		overflow:hidden;
		img{width:100%}
	}
	&-main{
		position:relative;width:100%;height:100%;z-index:0;display:flex;color:var(--van-primary-color);
		.content{
			height:60px; display: flex; justify-content:center; flex-direction: column; width:48%;
			b,strong{width:100%;height:20px;line-height:20px;}
		}
	}
	&-amount{
		font-size:24px;height:40px;line-height:40px;margin:10px 10px 10px 0;padding:0 4px 0 10px;width:24%;font-family:'Arial';
		position:relative;overflow:hidden;
		&::before{content:' '; position:absolute; top:15px; left:-5px; width:10px;height:10px;border-radius:10px;background-color: var(--body-bg-color);}
		&::after{
			content:' '; position:absolute; top:0; right:0; bottom:0; width:0.5px;
			opacity: .3;border-right:0.5px dashed var(--van-primary-color);
		}
		small{font-size:12px}
	}
	&-limit{
		font-size:12px;opacity: .8;
		&>span:first-child{margin-right:5px;}
	}
	&-bottom{
		opacity: .8; font-size:12px; transform:scale(.8,.8);transform-origin:0 center;
	}
	&-button{
		flex:1;padding-right:10px;height:100%;display:flex;align-items: center; justify-content: flex-end;
		.van-tag{width:70px; font-size:12px!important;justify-content:center;}
		.van-loading{
			margin-right:3px;
			:deep(.van-loading__spinner){width:13px;height:13px;}
		}
	}
}
</style>
<script lang="ts" setup>
//领取式优惠券展示单元组件
import { showToast } from 'vant'
import {CouponItem } from "@/types"

const props= defineProps<{
	item:CouponItem,
}>()
//data
const loading=ref(false) //表示该优惠券是否刚被用户按下进行领取操作，正在等待后台结果返回

//methods
const canGetCount = (remainAmount:number|null,acquiredAmount:number,maxAcquireAmount:number)=>{
	let canGet= maxAcquireAmount - acquiredAmount
	if(remainAmount==null){
		return canGet
	}
	else if(remainAmount<canGet){
		return remainAmount
	}else{
		return canGet
	}
}
//领取优惠券（临时效果实现，未来要改成请求服务端）
//json: 优惠券列表单元
const generateCoup = (json:any)=>{
	if(loading.value)	return
	if(canGetCount(json.remainAmount,json.acquiredAmount,json.maxAcquireAmount)<=0)	return
	loading.value=true
	setTimeout(()=>{
		//导步请求后的实现
		loading.value=false
		showToast({ message: '已领取优惠券', type: 'success',duration:1500, })
		//todo: 示例，根据返回的2个值，修改显示
		json.remainAmount=9 //修改总剩余量
		json.acquiredAmount=2 //修改用户已拥有量
	},1000)
}
</script>